<template>
  <view class="cart-publish-wrap" >
    <view class="ceil" >
      <view class="label" >出发地</view>
      <view class="value" >
        <input v-model="start_point" maxlength="20" type="text" placeholder="请填写出发地" >
      </view>
    </view>
    <view class="ceil" >
      <view class="label" >目的地/区域</view>
      <view class="value" >
        <input v-model="destination" maxlength="20" type="text" placeholder="请填写目的地/区域" >
      </view>
    </view>
    <view class="ceil" @tap="timeShow = true, type = 'start'" >
      <view class="label" >出发时间</view>
      <view class="value" >
        <input v-model="startTime" type="text" placeholder="拼车出发时间" disabled >
      </view>
      <view class="iconfont icon-arrow-right arrow" ></view>
    </view>
    <view class="ceil" @tap="timeShow = true, type = 'end'" >
      <view class="label" >截止时间</view>
      <view class="value" >
        <input v-model="endTime" type="text" placeholder="拼车截止时间" disabled >
      </view>
      <view class="iconfont icon-arrow-right arrow" ></view>
    </view>
    <view class="ceil" >
      <view class="label" >费用(元/人)</view>
      <view class="value" >
        <input :value="fee" @input="feeInput" type="digit" placeholder="单人乘车费用" >
      </view>
    </view>
    <view class="ceil" >
      <view class="label" >拼车人数</view>
      <view class="value" >
        <input v-model="recruit_amount" type="number" placeholder="最高可承载人数" >
      </view>
    </view>
    <view class="ceil" >
      <view class="label" >其他说明</view>
      <view class="value" >
        <input v-model="cost_explain" type="text" maxLength="50"  placeholder="其他说明" >
      </view>
    </view>

    <!-- 图片上传 -->
    <view class="upload-box" >
     <view class="title" >
       <text class="title-main" >封面图片</text>
       <text class="title-desc" >(请上传信息列表封面)</text>
     </view>
     <!-- 上传组件 -->
     <view class="box-solid clearfix" >
       <!-- 图片展示区 -->
       <view class="img-box fl" v-for="(item, index) in imgCoverList" :key="index">
         <image @tap="previewCoverImage" class="img-file" :src="item"></image>
         <view @tap="handleCoverDelImg(index)" class="iconfont icon-shanchu1 del" ></view>
       </view>
       <view class="fl" v-if="imgCoverList.length === 0">
        <img-upload @listenImg="listenCoverImg" :count="1"></img-upload>
       </view>
     </view>
    </view>

    <!-- 图片上传 -->
    <view class="upload-box" >
     <view class="title" >
       <text class="title-main" >车辆图片</text>
       <text class="title-desc" >(请上传含车牌信息的照片)</text>
     </view>
     <!-- 上传组件 -->
     <view class="box-solid clearfix" >
       <!-- 图片展示区 -->
       <view class="img-box fl" v-for="(item, index) in imgList" :key="index">
         <image @tap="previewImage" class="img-file" :src="item"></image>
         <view @tap="handleDelImg(index)" class="iconfont icon-shanchu1 del" ></view>
       </view>
       <view class="fl" v-if="imgList.length === 0">
        <img-upload @listenImg="listenImg" :count="1"></img-upload>
       </view>
     </view>
    </view>


    <!-- 进行中 -->
     <view class="btn-box">
       <button
         class="pp-button cancel-btn"
         hover-class="pp-button--active"
         @tap="handlePublish"
       >
         确认发布
       </button>
     </view>

    <!-- 时间选择器 -->
    <timePicker
    :show.sync="timeShow"
    @listenConfirmTime="listenConfirmTime"
    @listenStandardDate="listenStandardDate"
    ></timePicker>

  </view>
</template>

<script>
  import timePicker from './components/time-picker';
  import imgUpload from '@/components/img-upload.vue';
  import { ATTACHMENT_TYPE } from '@/api/home';
  import { CART_POST } from '@/api/order';
  import { momentTurn } from '@/tool';
  export default {
    components: {
      timePicker,
      imgUpload
    },
    data() {
      return {
        type: '',
        timeShow: false,
        start_point: '',  //出发地
        destination: '',  //目的地
        startTime: '',
        endTime: '',
        startTimeStandard: '',
        endTimeStandard: '',
        fee: '',
        recruit_amount: '',
        imgList: [],
        imgCoverList: [],
        post_type: '',  //拼车id
        cost_explain: '', //其他说明
        car_pic: ''
      }
    },
    onLoad() {

      this.getCarId()
    },
    methods: {
      getCarId() {
        this.$http.get(ATTACHMENT_TYPE, {
            per_page: 100,
          })
          .then(res => {
            let list = res.data;
            const carItem = list.filter(item => {
              return item.label === 'CAR'
            })

            this.post_type = carItem[0].id;
          })
      },
      listenImg(data) {
        // 上传处理
        this.imgList.push(data);
      },
      listenCoverImg(data) {
        // 上传处理
        this.imgCoverList.push(data);
      },
      previewImage() {
        // 预览
        uni.previewImage({
          current: this.imgList[0],
          urls: this.imgList,
        });
      },
      previewCoverImage() {
        uni.previewImage({
          current: this.imgCoverList[0],
          urls: this.imgCoverList,
        });
      },
      handleDelImg(index) {
        this.imgList.splice(index, 1)
      },
      handleCoverDelImg(index) {
        this.imgCoverList.splice(index, 1)
      },
      listenConfirmTime(data) {
        if(this.type === 'start') {
          this.startTime = data;
        }else if(this.type === 'end') {
          this.endTime = data;
        }
      },
      listenStandardDate(data) {
        if(this.type === 'start') {
          this.startTimeStandard = data;
        }else if(this.type === 'end') {
          this.endTimeStandard = data;
        }
      },
      feeInput(e) {
        const count = e.detail.value;
        let refundPostFee = count.match(/^\d*(\.?\d{0,2})/g)[0];
        if (count === refundPostFee) {
          this.fee = count;
        } else {
          refundPostFee = '';
          this.$nextTick(() => {
            this.fee = refundPostFee;
          });
        }
      },
      handlePublish() { //确认发布
        if(!this.start_point.trim()) {
          uni.showToast({
            title: '请输入出发地',
            icon: 'none',
          });
          return
        }
        if(!this.destination.trim()) {
          uni.showToast({
            title: '请输入目的地',
            icon: 'none',
          });
          return
        }
        if(!this.startTime.trim()) {
          uni.showToast({
            title: '请选择出发时间',
            icon: 'none',
          });
          return
        }
        if(!this.endTime.trim()) {
          uni.showToast({
            title: '请选择截止时间',
            icon: 'none',
          });
          return
        }
        if(!this.fee.trim()) {
          uni.showToast({
            title: '请输入费用',
            icon: 'none',
          });
          return
        }
        if(!this.recruit_amount.trim() || this.recruit_amount <= 0) {
          uni.showToast({
            title: '请输入拼车人数',
            icon: 'none',
          });
          return
        }
        if(this.imgCoverList.length === 0) {
          uni.showToast({
            title: '请上传封面图片',
            icon: 'none',
          });
          return
        }
        if(this.imgList.length === 0) {
          uni.showToast({
            title: '请上传车辆照片信息',
            icon: 'none',
          });
          return
        }
        if(momentTurn(this.endTimeStandard) >= momentTurn(this.startTimeStandard)) {
          uni.showToast({
            title: '截止时间必须早于或者等于出发时间',
            icon: 'none',
          });
          return
        }


         let params = {};
             params['title'] = this.startTime + this.start_point +'出发至'+ this.destination+'拼车';
             params['thumb'] = this.imgCoverList[0];
             params['car_pic'] = this.imgList[0];
             params['post_type'] = this.post_type;
             params['recruit_amount'] = this.recruit_amount;
             params['contact'] = uni.getStorageSync('nickName');
             params['contact_phone'] = uni.getStorageSync('mobile');
             params['cost'] = this.fee * 100;
             params['cost_explain'] = this.cost_explain;
             params['start_point'] = this.start_point;
             params['destination'] = this.destination;
             params['start_time'] = momentTurn(this.startTimeStandard);
             params['end_time'] = momentTurn(this.endTimeStandard);
             params['status'] = 1;
             params['region_id'] = uni.getStorageSync('regionId');
             params['content'] = `<div><p style="font-size: 12px;margin: 0;" >${this.cost_explain}</p><img style="width: 100%;" src="${this.imgList[0]}" /></div>`;


         this.$http.post(CART_POST, params, {
           showLoading: true
         })
         .then(() => {
           uni.showToast({
             title: '发布成功',
             icon: 'success',
           });
           
           setTimeout(() => {
             uni.hideLoading();
             uni.navigateBack({
               delta: 1,
             });
           }, 1000)
         })
      }
    }

  }
</script>

<style lang="less" >
  .cart-publish-wrap{
    min-height: 100vh;
    padding-bottom: 150rpx;
    padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    background-color: #FFFFFF;
    .ceil{
      display: flex;
      align-items: center;
      padding: 24rpx;
      border-bottom: 1px solid #EEEEEE;
      .label{
        width: 180rpx;
        flex-shrink: 0;
      }
      .value{
        flex: 1;
      }
      .arrow{
        font-size: 32rpx;
        flex-shrink: 0;
        color: #999999;
      }
    }
    .img-box{
      position: relative;
      width: 200rpx;
      height: 200rpx;
      .img-file{
        width: 100%;
        height: 100%;
      }
      .del{
        position: absolute;
        right: 0;
        top: 0;
        margin-right: -20rpx;
        margin-top: -20rpx;
        font-size: 36rpx;
        color: #ff0000;
      }
    }
    .upload-box{
      width: 710rpx;
      padding-bottom: 24rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;

      .title{
        display: flex;
        align-items: center;
        padding: 24rpx;
        .title-main{
          font-size: 28rpx;
          font-weight: 500;
        }
        .title-desc{
          font-size: 24rpx;
          margin-left: 16rpx;
          color: #999999;
        }
      }
      .box-solid{
        width: 200rpx;
        height: 200rpx;
        margin-left: 24rpx;
        border-radius: 12rpx;
        border: 1px solid #EEEEEE;
      }
    }
    .btn-box {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 136rpx;
      .cancel-btn {
        width: 710rpx;
        height: 92rpx;
        font-size: 32rpx;
        background-color: #fedd00;
      }
    }
  }
</style>
